<template>
  <div>
    <el-card>
      <div>
        <el-page-header @back="back" content="信息完善"></el-page-header>
      </div>
    </el-card>
    <el-card>
      <div slot="header">基本信息</div>
      <div>
        <el-form ref="form" :model="formData" label-width="10rem">
          <el-form-item label="企业名称">
            <el-input v-model="formData.name"></el-input>
          </el-form-item>
          <el-form-item label="企业类型">
    
            <el-radio-group v-model="formData.type">
              <el-radio label="开发商" name="开发商"></el-radio>
              <el-radio label="代销机构" name="代销机构"
                >代销机构</el-radio
              >
              <el-radio label="包销机构" name="包销机构"
                >包销机构</el-radio
              >
            </el-radio-group>
          </el-form-item>
          <el-form-item label="营业执照">
            <el-upload 
              :multiple="false"
              ref="license"
              action=" " 
              list-type="picture-card" 
              :auto-upload="false"
              :http-request="uploadLicense"
            >
              <i slot="default" class="el-icon-plus"></i>
              <div slot="file" slot-scope="{ file }">
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url"
                  alt=""
                />
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                  >
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleDownload(file)"
                  >
                    <i class="el-icon-download"></i>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleRemove(file)"
                  >
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
            </el-upload>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input v-model="formData.phone"></el-input>
          </el-form-item>
          <el-form-item label="企业介绍">
            <el-input type="textarea" v-model="formData.intru"></el-input>
          </el-form-item>

          <el-form-item label="法人姓名">
            <el-input v-model="formData.personName"></el-input>
          </el-form-item>

          <el-form-item label="身份证(国徽面)">
            <el-upload 
             :multiple="false"
              ref="uploadidCardImg_obverse"
              action=" " 
              list-type="picture-card" 
              :auto-upload="false"
              :http-request="uploadidCardImg_obverse"
            >
              <i slot="default" class="el-icon-plus"></i>
              <div slot="file" slot-scope="{ file }">
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url"
                  alt=""
                />
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                  >
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleDownload(file)"
                  >
                    <i class="el-icon-download"></i>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleRemove(file)"
                  >
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
            </el-upload>
          </el-form-item>
           <el-form-item label="身份证(人像面)">
            <el-upload
              :multiple="false"
              ref="uploadidCardImg_back"
              action=" " 
              list-type="picture-card" 
              :auto-upload="false"
              :http-request="uploadidCardImg_back"
            >
              <i slot="default" class="el-icon-plus"></i>
              <div slot="file" slot-scope="{ file }">
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url"
                  alt=""
                />
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                  >
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleDownload(file)"
                  >
                    <i class="el-icon-download"></i>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleRemove(file)"
                  >
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
            </el-upload>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submit" class="btn">保存</el-button>
            <el-button type="primary" plain class="btn">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import {mapState} from 'vuex'
const qs = require('qs');
export default {
  watch:{
    personal_info(){
      this.init_personal_info()
    }
  },
  computed:{
    ...mapState(['personal_info'])
  },
  mounted(){
    this.init_personal_info()
  },
  data() {
    return {
      idCardImageUrl: "../assets/idcard.png",
      formData: {
        name: "",
        type: "",
        licenseImg:null,
        phone: "",
        intru: "",
        personIdCode:"",
        personName: "",
        idCardImg_obverse:null,
        idCardImg_back:null
      },
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      imageUrl: "",
    };
  },
  methods: {
    back(){

    },
    uploadidCardImg_obverse(arg){
      this.formData.idCardImg_obverse = arg.file
    },
    uploadidCardImg_back(arg){
      this.formData.idCardImg_back = arg.file
    },
    uploadLicense(arg){
      this.formData.licenseImg = arg.file
    },
    init_personal_info(){
      let p = this.personal_info
  
      this.formData.name = p.name
      this.formData.type = p.type
      this.formData.phone = p.phone
      this.formData.intru = p.intru
      this.formData.licenseImg = p.licenseImg
      this.formData.personIdCode = p.personIdCode
      this.formData.personName = p.personName
      this.formData.idCardImg_obverse = p.idCardImg_obverse
      this.formData.idCardImg_back = p.idCardImg_back
    },
    submit(){
      console.log(this.formData)
      this.$store.commit('set_personal_info',this.formData)
      this.$message.success('修改成功')
    },
    // submit(){
    //   this.$refs.license.submit()
    //   this.$refs.uploadidCardImg_back.submit()
    //   this.$refs.uploadidCardImg_obverse.submit()
    // // this.axios.post('/foo', qs.stringify({ 'bar': 123 }));
    //   console.log({
    //         orgname:this.formData.name,
    //         idcode:this.formData.personIdCode,
    //         intru:this.formData.intru,
    //         personname:this.formData.personName,
    //         phone:this.formData.phone,
    //         licenseimg:this.formData.licenseImg,
    //         idcardimg_obverse:this.formData.idCardImg_obverse,
    //         idcardimg_back:this.formData.idCardImg_back
    //     })


    //    this.axios({
    //     method: "put",
    //     headers: { "Content-Type":'multipart/form-data' },
    //     url: "http://47.99.124.245:8082/updateEninformation",
    //     data: {
    //         orgname:this.formData.name,
    //         idcode:"213123123",
    //         intru:this.formData.intru,
    //         personname:this.formData.personName,
    //         phone:this.formData.phone,
    //         licenseimg:this.formData.licenseImg,
    //         idcardimg_obverse:this.formData.idCardImg_obverse,
    //         idcardimg_back:this.formData.idCardImg_back
    //     },
    //     // transformRequest:  [function (data) {
    //     //     let ret = ''
    //     //     for (let it in data) {
    //     //       ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
    //     //     }
    //     //     return ret
    //     // }],
    //     //  paramsSerializer: function(params) {
    //     //   return Qs.stringify(params, {arrayFormat: 'brackets'})
    //     // },
    //   }).then((res) => {
    //     console.log(res)
    //   }).catch((err)=>{
    //     console.log(err)
    //   })
    // },
    beforeAvatarUpload() {},
    handleAvatarSuccess() {},
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
    btn() {
      console.log("23423");
    },
  },
};
</script>

<style>
.el-card{
  margin-bottom: 1rem;
}
.el-form{
  width: 70%;
  margin: auto;
  min-width: 900px;
}
.el-input,.el-textarea{
  width: 70%;
}
.btn{
  width: 25%;
  max-width: 200px;
  margin-right: 4rem;
}
.info-main {
  width: 70%;
  margin: auto;
  padding: 1rem;
  background-color: white;
}
.info-main .el-input,
.info-main .el-textarea {
}
.info-main .el-form-item {
  width: 70%;
  margin: 1rem auto;
}
.el-upload img {
  width: 100%;
  height: 100%;
}
.el-upload {
  width: 50%;
}
.business-license {
}
</style>